<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>生命周期钩子</title>
    </head>
    <body>

        <h3>生命周期钩子</h3>

        <p>生命周期钩子是组件生命周期中的某个节点</p>
        <p>类似于人生当中的某个节点(比如 小学毕业了、中学毕业了、大学毕业了、结婚了)</p>
        <p>不要将生命周期钩子当作生命周期</p>

        <div id="root">
            <!-- 使用一次 button-counter 组件就会创建组件的一个 button-counter 实例 -->
            <button-counter id="first"></button-counter>
            <!-- 使用一次 button-counter 组件就会创建组件的一个 button-counter 实例 -->
            <button-counter id="second"></button-counter>
            <hr>
            <button @click="unmount">卸载根组件</button>
        </div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script type="text/javascript">
            const ButtonCounter = {
                template: `<button @click="handler">{{ count }}</button>`,
                props: {
                    id: {
                        type: [String,Number],
                        required: true
                    }
                },
                data(){
                    return { count: 1000 }
                },
                methods: {
                    handler(){
                        this.count++ ;
                    }
                },
                beforeCreate(){
                    console.log( `before create`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                },
                created(){
                    console.log( `created`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                },
                beforeMount(){
                    console.log( `before mount`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                    let btn = document.querySelector( 'button' );
                    console.log( '\tbutton: ' , btn );
                },
                mounted(){
                    console.log( `mounted`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                    let btn = document.querySelector( 'button' );
                    console.log( '\tbutton: ' , btn );
                    console.log( this );
                },
                beforeUpdate(){
                    console.log( `before update`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                },
                updated(){
                    console.log( `updated`);
                    console.log( '\tcount: ' , this.count , ' id:'  , this.id , ' handler: ' + this.handler );
                },
                beforeUnmount(){
                    console.log( `before unmount`);
                },
                unmounted(){
                    console.log( `unmounted`);
                }
            }

            const app = Vue.createApp( {
                methods: {
                    unmount(){
                        app.unmount();
                    }
                },
                beforeUnmount(){
                    console.log( `root component before unmount`);
                },
                unmounted(){
                    console.log( `root component unmounted`);
                }
            });

            app.component( 'button-counter' , ButtonCounter );

            app.mount('#root');
        </script>
        
    </body>
</html>